<template>
    <view class="news">
        <!-- 搜索 -->
		<!-- v-model="keywords" -->
        <view class="news-search px-[24rpx] py-[14rpx] bg-white" url="/pages/search/search">
            <u-search  @search="searchEnv"  placeholder="请输入关键词搜索"  :show-action="true"></u-search>
        </view>

        <!-- 内容 -->
        <tabs
            :current="current"
            @change="handleChange"
            height="80"
			activeColor="#F7DA1C"
            bar-width="60"
            :barStyle="{ bottom: '0' }"
        >
            <tab v-for="(item, i) in tabList" :key="i" :name="item.cat_name">
                <view class="news-list pt-[20rpx] pa30">
                    <news-list ref="newsList" :keywords="keywords"  :cid="item.id" :i="i" :index="current"></news-list>
                </view>
            </tab>
        </tabs>
		<!-- <view class="fix_btn_bottom" ><view class="button_sty">立即下单</view></view> -->
		<view class="fabu-btn">
			<view class="fabu-b" @click="toPath('/pages/qiugou/fabu')" >
				发布求购
			</view>
		</view>    
        <!-- <tabbar /> -->
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed ,shallowRef} from 'vue'
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import NewsList from './component/news-list.vue'
import { getArticleCate,getQgCat,getQgLists } from '@/api/news'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user';







const newsList = shallowRef<any>(null)

	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)


const tabList = ref<any>([])
const current = ref<number>(0)
const keywords = ref<any>("");

const searchEnv = (v) => {
	keywords.value = v;
	
}

const toPath = (link : any, login = true) => {
		// console.log(login,isLogin.value == false)
		if (isLogin.value == false && login) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return false;
		}
		uni.navigateTo({
			url: link
		})
	}

const handleChange = (index: number) => {
    console.log(index)
    current.value = Number(index)
}

const getData = async () => {
    const data = await getQgCat()
    tabList.value = data;
}

onLoad((options) => {
    getData()
})
</script>

<style lang="scss">
	.fabu-btn{
		padding: 45rpx 30rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 999;
		right: 20rpx;
		// background-color: #FFFFFF;
		.fabu-b{
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 45rpx;
			border: 2px solid #4DF280;
			padding: 0 60rpx;
			font-weight: 600;
			font-size: 30rpx;
			color: #16E86E;
			background-color: #fff;
		}
		.woyouhuo{
			height: 90rpx;
			background: linear-gradient( 90deg, #31F5A7 0%, #9AE910 100%);
			border-radius: 45rpx;
			line-height: 90rpx;
			text-align: center;
			flex: 1;
			margin-left: 30rpx;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
			
		}
	}
	
	
	
	.fix_btn_bottom {
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  padding-bottom: env(safe-area-inset-bottom);
	  background: #fff;
	  border-radius: 40rpx 40rpx 0rpx 0rpx;
	  overflow: hidden;
	  z-index: 5;
	}
	
	.fix_btn_bottom .button_sty {
	  display: block;
	  width: 100%;
	  height: 100rpx;
	  line-height: 100rpx;
	  text-align: center;
	  font-size: 30rpx;
	  color: #fff;
	  background: linear-gradient(270deg, #9AE910 0%, #0EE6A1 100%);
	  border-radius: 40rpx 40rpx 0rpx 0rpx;
	}
	
	
.news {
    &-search {
        margin-bottom: 2rpx;
    }

    &-list {
        height: calc(100vh - 150rpx - env(safe-area-inset-bottom));
		
    }
}
</style>
